<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/crud.css"/>
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div id="table-bar" class="container">
            <span class="grouping">
                <button id="btn-add" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus"></span>
                    新增
                </button>
                <button id="btn-remove" class="btn btn-primary">
                    <span class="glyphicon glyphicon-trash"></span>
                    删除
                </button>
                <button id="btn-edit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-edit"></span>
                    编辑
                </button>
                <button id="btn-query" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span>
                    查询
                </button>
            </span>
            
            <span class="grouping">
                <input id="query-num" type="text" placeholder="按工号查询"/>
                <input id="query-name" type="text" placeholder="按姓名查询"/>
            </span>
        </div>

        <table class="table table-striped table-hover">
            <thead id="table-head">
                <tr>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </tr>
            </thead>
            <tbody id="table-data">
            </tbody>
        </table>
    </div>

    <div id="modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 id="modal-title" class="modal-title">添加数据</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="modal-num">工号</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" id="modal-num" class="form-control" name="num"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="modal-name">姓名</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" id="modal-name" class="form-control" name="name"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="modal-sex">性别</label>
                            </div>
                            <div id="modal-sex" class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" id="modal-sex-male" name="sex" value="0" checked/>
                                    男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" id="modal-sex-female" name="sex" value="1"/>
                                    女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="modal-pass">密码</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="password" id="modal-pass" class="form-control" name="pass"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="modal-age">年龄</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="number" id="modal-age" class="form-control" name="age" value="19"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="modal-birth">出生日期</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="date" id="modal-birth" class="form-control" name="birth" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" value="2001-01-01"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="modal-submit" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/crud.js"></script>
</body>

</html>